<template>
  <div id="app">
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎登录</h1>
                  </div>
                  <p>硅谷物流管理系统</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                  <form
                    method="post"
                    action="login.html"
                    class="form-validate"
                    id="loginFrom"
                  >
                    <div class="form-group">
                      <input
                        id="login-username"
                        type="text"
                        v-model="login.account"
                        name="userName"
                        required
                        data-msg="请输入用户名"
                        placeholder="用户名"
                        value="admin"
                        class="input-material"
                      />
                    </div>
                    <div class="form-group">
                      <input
                        id="login-password"
                        type="password"
                        v-model="login.password"
                        name="passWord"
                        required
                        data-msg="请输入密码"
                        placeholder="密码"
                        class="input-material"
                      />
                    </div>

                    <div class="form-group">
                      <input
                        type="text"
                        v-model="login.value"
                        required
                        data-msg="验证码"
                        placeholder="验证码"
                        class="input-material w-50"
                      />
                      <el-image
                        @click="getCaptcha()"
                        :src="yzmImg"
                        class="yzmImg"
                      ></el-image>
                    </div>

                    <el-button type="primary" @click="submitForm()"
                      >登录</el-button
                    >
                  </form>
                  <br />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../js/front.js";
import "../vendor/jquery-validation/jquery.validate.min.js";
import "../css/style.default.css";
import { getCaptcha, login } from "@/api/authApi";
export default {
  data() {
    return {
      login: {
        account: "",
        password: "",
        key: "",
        value: "",
      },
      yzmImg: "",
    };
  },
  methods: {
    submitForm() {
      if (this.login.account == "") {
        this.$message.error("请输入账号");
      } else if (this.login.password == "") {
        this.$message.error("请输入密码");
      } else if (this.login.value == "") {
        this.$message.error("请输入验证码");
      } else {
        login(this.login).then((data) => {
          var status=data.data.code
          var msg=data.data.msg
          if(status==1){
            this.$message.success({
            message: msg
          });
         sessionStorage.setItem("auth",data.data.auth)
         this.$store.commit("setUser",data.data.user)
         this.$store.commit("setPromiss",data.data.promiss)
          this.$router.push({ path: "/index" });
          }else{
          this.$message.error({
            message: msg,
          });
          }
        });
      }
    },
    getCaptcha() {
      getCaptcha().then((data) => {
        this.login.key = data.data.key;
        this.yzmImg = data.data.img;
      });
    },
  },
  created() {
    this.getCaptcha();
  },
};
</script>

<style scoped>
.yzmImg {
  width: 120px;
  height: 40px;
}
</style>

